<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>申请表</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body {
        background-color: white;
    }
</style>
<style>
    body {
        background-color: white;
    }

    .el-select .el-input {
        width: 332px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }


    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .container {
        overflow-x: hidden;
    }

    .date {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div id="pur">
    <template>
        <el-container>
            <el-header style="height: 30%">
                <template>
                    <div class="date">
                        <el-date-picker
                                v-model="searchdate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="allot">
                        </el-date-picker>
                        <el-button icon="el-icon-search" @click="search" circle style="margin-left: 10px"></el-button>
                    </div>
                </template>
                <el-button type="primary" icon="el-icon-edit" @click="add" circle></el-button>
            </el-header>
            <el-main style="height: 40%">
                <template>
                    <el-table
                            :data="purList.data"
                            height="480"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="purId"
                                label="编号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="purName"
                                label="零件名称"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="purPrice"
                                label="单价">
                        </el-table-column>
                        <el-table-column
                                prop="purNumber"
                                label="采购数量">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="采购人">
                        </el-table-column>
                        <el-table-column
                                prop="supName"
                                label="供货商">
                        </el-table-column>
                        <el-table-column
                                prop="purCause"
                                label="采购原因">
                        </el-table-column>
                        <el-table-column
                                prop="purType"
                                label="采购方式">
                        </el-table-column>
                        <el-table-column
                                prop="purRepertory"
                                label="库存数量">
                        </el-table-column>

                        <el-table-column
                                prop="purCount"
                                label="总价">
                        </el-table-column>
                        <input type="hidden" prop="purReject">
                        <el-table-column
                                prop="purState"
                                label="状态">
                            <template slot-scope="scope">
                    <span>
                        {{scope.row.state == 1 ? '未申请' : '已申请'}}
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="purDate"
                                label="采购时间">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="{row}">
                                <el-button @click="open({row})" type="info" round>查看结果</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-main>
            <el-drawer
                    title="添加采购申请单"
                    size="60vh"
                    :visible.sync="drawer"
                    :direction="direction">
                <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px;">
                    <el-col :span="6">
                        <div class="grid-content">
                            <label>零件名称
                                <span @click="uploading"> <el-icon class="el-icon-upload"></el-icon></span>
                            </label>
                            <el-input placeholder="请输入内容" v-model="puradd.purName"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <label>
                                零件单价
                            </label>
                            <el-input placeholder="请输入内容" v-model="puradd.purPrice"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>采购数量</label>
                                <el-input placeholder="请输入内容" v-model="puradd.purNumber"></el-input>
                            </template>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>采购原因</label>
                                <el-input placeholder="请输入内容" v-model="puradd.purCause"></el-input>
                            </template>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px;">
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>采购人员</label>
                                <el-select v-model="puradd.purUserId" placeholder="请选择">
                                    <el-option label="全部" :value="-1"></el-option>
                                    <el-option
                                            v-for="item in uselect"
                                            :key="item.userId"
                                            :label="item.name"
                                            :value="item.userId">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>供应商</label>
                                <el-select v-model="puradd.purSupp" placeholder="请选择">
                                    <el-option label="全部" :value="-1"></el-option>
                                    <el-option
                                            v-for="item in supp"
                                            :key="item.supId"
                                            :label="item.supName"
                                            :value="item.supId">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>
                                    现有存货
                                    <span @click="selectnum"><el-icon class="el-icon-warning-outline"></el-icon></span>
                                </label>
                                <el-input placeholder="请输入内容" v-model="puradd.purRepertory"></el-input>
                            </template>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <template>
                                <label>申请时间</label>
                                <div class="block">
                                    <el-date-picker style="width: 325px"
                                                    v-model="puradd.purDate"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                            </template>
                        </div>
                    </el-col>
                </el-row>
                <br/>
                <br/>
                <el-row :gutter="10" style="margin-left: 0px; margin-right: 0px;">
                    <el-col :span="6" :offset="6">
                        <div class="grid-content"></div>
                    </el-col>
                    <el-col :span="6" :offset="4">
                        <div class="grid-content">
                            <el-button type="success" @click="insert" round>提交申请</el-button>
                            <el-button type="warning" @click="reset" round>取消申请</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-drawer>
            <el-dialog
                    title="提示"
                    :visible.sync="dialog"
                    width="50%">
                <template>
                    <el-table
                            :data="uploadingdata"
                            style="width: 100%"
                            @selection-change="chandleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="编号"
                                prop="id"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="零件名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="value"
                                label="数量"
                                show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </template>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialog= false">取 消</el-button>
    <el-button type="primary" @click="yes">确 定</el-button>
  </span>
            </el-dialog>
        </el-container>
    </template>
</div>
<script>
    new Vue({
        el: "#pur",
        data: {
            searchdate: [],
            purList: [],
            // 抽屉由上向下
            drawer: false,
            direction: 'ttb',
            dialog: false,
            uselect: [],
            supp: [],
            vo: {
                startdate: '',
                overdate: ''
            },
            puradd: {
                purRepertory: '',
                purState: 0,
                purType: "线下"
            },
            uploadingdata: [],
            cmultipleSelection: [],
            caigoudata: {}
        },
        methods: {
            search() {
                axios.get("/pur/searchList", {params: this.vo})
                    .then(({data}) => {
                        this.purList = data;
                    })
                this.searchdate = '';
                this.vo.startdate = '';
                this.vo.overdate = ''
            },
            //查询结果
            open(row) {
                if (row.row.purReject != null && row.row.purReject != '') {
                    const h = this.$createElement;
                    this.$notify({
                        title: '审核结果',
                        message: h('i', {style: 'color: teal'}, row.row.purReject)
                    });
                } else {
                    const h = this.$createElement;
                    this.$notify({
                        title: '审核结果',
                        message: h('i', {style: 'color: red'}, '结果审核中,请耐心等待!')
                    });
                }
            },
            //user下拉框查询
            searchUser() {
                axios.get("/sys/searchList")
                    .then(({data}) => {
                        this.uselect = data.data;
                    })
            },
            //供应商下拉查询
            searchsupp() {
                axios.get("/cli/searchList")
                    .then(({data}) => {
                        this.supp = data.data;
                    })
            },
            add() {
                this.drawer = true;
                this.searchUser();
                this.searchsupp();
            },
            insert() {
                if (this.caigoudata.id != null || this.caigoudata != '') {
                    axios.get("/pur/editstate?id=" + this.caigoudata.id)
                }
                axios.post("/pur/addList", this.puradd)
                    .then(({data}) => {
                        this.drawer = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset();
                    })
            },
            //时间拆分
            allot() {
                this.vo.startdate = this.searchdate[0];
                this.vo.overdate = this.searchdate[1];
            },
            reset() {
                this.drawer = false;
                this.puradd.purName = '',
                    this.puradd.purPrice = '',
                    this.puradd.purUserId = '',
                    this.puradd.purNumber = '',
                    this.puradd.purcause = '',
                    this.puradd.purtype = '线下',
                    this.puradd.purSupp = '',
                    this.puradd.purRepertory = '',
                    this.puradd.purDate = '';
            },
            //采购弹窗
            uploading() {
                this.dialog = true;
                axios.get("/pur/lsearchist")
                    .then(({data}) => {
                        this.uploadingdata = data.data;
                    })
            },
            chandleSelectionChange(val) {
                this.cmultipleSelection = val;
            },
            yes() {
                this.dialog = false;
                this.caigoudata.id = this.cmultipleSelection[0].id;
                this.puradd.purName = this.cmultipleSelection[0].name;
                this.puradd.purNumber = this.cmultipleSelection[0].value + 100;
                this.caigoudata.state = this.cmultipleSelection[0].state;
            },
            selectnum() {
                axios.get("/pur/selectnum?name=" + this.puradd.purName)
                    .then(({data}) => {
                        if (data.data != null) {
                            this.puradd.purRepertory = data.data;
                        } else {
                            this.puradd.purRepertory = 0;
                        }

                    })
            }
        },
        mounted() {
            this.search();
        }
    })
</script>
</body>
</html>